// 词云
<template>
  <div style="width:100%;height:100%">
    <div id="centerCiyun" style="width:100%;height:100%;"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
import theme from '@/assets/js/purple'
export default {
  data() {
    return {
      chart: null
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.draw();
  },
  methods: {
    async getCiyun () {
        const res = await this.$http.get('china_wordcloud/')
        // console.log(res)
        if(res.status !== 200){
            return this.$message.error('词云获取失败！')
        }
        return res.data.data;
      },
    async draw() {
      // 基于准备好的dom，初始化echarts实例
      // [Vue warn]: Error in mounted hook;"TypeError: Cannot readl property'init' of undefined"
      // 版本问题，别用最新的5.0.0  
      this.$echarts.registerTheme('theme', theme);
      this.chart = this.$echarts.init(document.getElementById("centerCiyun"),theme);
      //  ----------------------------------------------------------------
      let option_ciyun = await this.getCiyun();
      this.chart.setOption(option_ciyun);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
</style>